import "./App.css";
import { useEffect, useRef, useState } from "react";
import sandian from "./utils/tree";
import line from "./utils/line"
import ChartContextMenu from "./components/ChartMenu";
import SeamlessScroll from "./components/SeamlessScrollDemo";
import polar from "./utils/polar"
import FundFlowChart from "./components/FundFlowChart";
import EnhancedCameraView from "./components/EnhancedCameraView";



function App() {
  const [activeChart, setActiveChart] = useState("chart2");
  const sandianChart = useRef(null);
  // 新增状态
  const [menuVisible, setMenuVisible] = useState(false);
  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
  const [selectedNode, setSelectedNode] = useState(null);
  const [nodeExpanded, setNodeExpanded] = useState({}); // 新增状态，用于跟踪节点展开状态
  


  useEffect(() => {
    if (activeChart === "chart1" && !sandianChart?.current?.chart){
      sandianChart.current = sandian(document.getElementById("sandian"));
      sandianChart.current.chart.on("click", (e) => {
        console.log(e);
        setSelectedNode(e.data);
        setMenuPosition({ x: e.event.event.clientX, y: e.event.event.clientY });
        setMenuVisible(true);
      });
    }
  }, [activeChart, nodeExpanded]);
  useEffect(() => {
      line(document.getElementById("line"))
      polar(document.getElementById("polar"))
  }, []);



  return (
    <>
      {menuVisible && (
        <ChartContextMenu
          position={menuPosition}
          data={selectedNode}
          onClose={(type) => {
            setMenuVisible(false);
            if (type === 1) {
              // 查看详情
              alert("查看" + selectedNode.name + "详情" + "\n可跳转到公司详情页面，也可弹框查看。");
            } else if (type === 2) {
              // // 假设你的树图已经渲染
              // let option = sandianChart.current.chart.getOption();
              // // 找到某个节点（假设要展开 name 为 "节点A" 的节点）
              // function toggleNodeExpand(node, targetName) {
              //   if (node.name === targetName) {
              //     node.collapsed = !node.collapsed ; // true 折叠，false 展开
              //     return
              //   }
              //   if (node.children) {
              //     node.children.forEach(child => toggleNodeExpand(child, targetName));
              //   }
              // }
              // // 修改 option 里的数据
              // toggleNodeExpand(option.series[0].data[0], selectedNode.name); // 展开节点A
              // // 更新图表
              // sandianChart.current.chart.setOption(option,{ notMerge: true });
            }
          }}
        />
      )}
      <div className="App">
        <div className="dashboard">
          {/* 顶部标题栏 */}
          <header className="header">
            <h1>大屏展示系统</h1>
          </header>

          {/* 左侧第一栏 */}
          <aside className="left-panel-1">
            <div className="panel-content">
              <h2>动态折线图-矩形坐标系</h2>
                  <div className="chart-placeholder" id="line">

                  </div>
            </div>
          </aside>

          {/* 左侧第二栏 */}
          <aside className="left-panel-2">
            <div className="panel-content">
              <h2>折线图-极坐标系</h2>
                  <div className="chart-placeholder" id="polar">

                  </div>
            </div>
          </aside>

          {/* 中间内容区域 */}
          <main className="main-content">
            {/* 中间顶部切换按钮 */}
            <div className="chart-tabs">
              <button
                className={activeChart === "chart1" ? "active" : ""}
                onClick={() => setActiveChart("chart1")}
              >
                树形图-根据数据设置节点样式
              </button>
              <button
                className={activeChart === "chart2" ? "active" : ""}
                onClick={() => setActiveChart("chart2")}
              >
                摄像头监控-实时视频流
              </button>

              <button
                className={activeChart === "fundFlow" ? "active" : ""}
                onClick={() => setActiveChart("fundFlow")}
              >
                资金流向图-动态计算节点位置
              </button>
            </div>

            {/* 中间图表区域 */}
            <div className="chart-container">
              {activeChart === "chart1" && (
                <div className="chart chart1">
                  {/* <h3>图表1内容</h3> */}
                  <div className="chart-placeholder" id="sandian">
                    图表1展示区域
                  </div>
                </div>
              )}
              {activeChart === "chart2" && (
                <div className="chart chart2">
                  <h3>远程摄像头监控-数据由公共测试流提供</h3>
                  <div className="chart-placeholder" style={{ height: "100%" }}>
                    <EnhancedCameraView cameraId="remote-camera-1" />
                  </div>
                </div>
              )}
              {activeChart === "fundFlow" && (
                <div className="chart fundFlow">
                  {/* <h3>资金流向图</h3> */}
                  <div className="chart-placeholder" style={{ height: "100%" }}>
                    <FundFlowChart />
                  </div>
                </div>
              )}
            </div>
          </main>

          {/* 右侧第一栏 */}
          <aside className="right-panel-1">
            <div className="panel-content" style={{
                display: "flex",
                flexDirection: "column",
                overflow: "hidden"
              }}>
              <h2>无缝滚动</h2>
              <div style={{flexGrow:2,marginTop:4}}>
                <SeamlessScroll  />

              </div>
            </div>
          </aside>

          {/* 右侧第二栏 */}
          <aside className="right-panel-2">
            <div className="panel-content">

            </div>
          </aside>
        </div>
      </div>
    </>
  );
}

export default App;
